<!-- <4-1></4-1> -->
<!-- <template>
  <div>
    <count-com></count-com>
    <count-com/>
  </div>
</template>
<script></script>
<style scoped></style> -->
<!-- <4-2></4-2>
<template>
  <div>
    <NumberCom>
    </NumberCom>
  </div>
</template>
<script>
// 导入局部组件对象
import NumberCom from './components/NumberCom.vue'
export default {   // 导出当前的单文件组件，供外部文件使用
  // 注册局部组件
  components:{
    NumberCom
  },
}
</script>
<style scoped></style> -->
<!-- <4-3></4-3>
<template>
  <div>
    <HelloCom name="Jim"></HelloCom>
    <HelloCom name="Lily"></HelloCom>
    <HelloCom name="Bob"></HelloCom>
  </div>
</template>
<script>
import HelloCom from './HelloCom.vue';
export default{
  components:{
  HelloCom,
  },
};
</script>
<script scoped>
</script> -->
<!-- <4-4></4-4> -->
 <!-- <template>
  <div>
    <input type="radio" v-model="activeComponent" value="ActiveCom1" />ActiveCom1
    <input type="radio" v-model="activeComponent" value="ActiveCom2" />ActiveCom2 
    <component :is="activeComponent"></component>
  </div>
</template>

<script>
import ActiveCom1 from './components/ActiveCom1.vue';
import ActiveCom2 from './components/ActiveCom2.vue';

export default {
  data() {
    return {
      activeComponent: "ActiveCom2",
    };
  },
  components: {
    ActiveCom1,
    ActiveCom2
  }
};
</script>

<style></style> -->
<!-- <4-5></4-5> -->
 <!-- <template lang="">
  <div>
    <Suspense>
      <template v-slot:default>
        <AsyncCom></AsyncCom>
      </template>
      <template v-slot:fallback>
        <h2> LOADING.....</h2>
      </template>
      </Suspense>
  </div>
 </template>
 <script>
 import {defineAsyncComponent} from 'vue'
  const AsyncCom=defineAsyncComponent(
    ()=>import("./HelloCom1.vue")
  )
 export default {
 components:{
  AsyncCom
 }
 }
 </script>
 <style lang="">
  
 </style> -->
 <!-- <4-6></4-6> -->
  <!-- <template lang="">
    <div>
      <button @click="currentTab = 'Tab1'">音乐</button>
      <button @click="currentTab = 'Tab2'">视频</button>
      <button @click="currentTab = 'Tab3'">新闻</button>
      <keep-alive>
        <component :is="currentTab"></component>
      </keep-alive>
    </div>
  </template>
  <script>
  import Tab1 from './TabCom1.vue';
  import Tab2 from './TabCom2.vue';
  import Tab3 from './TabCom3.vue';
  export default {
    data() {
      return {
        currentTab:"Tab1",
      };
    },
    components:{
      Tab1,
      Tab2,
      Tab3,
    },
    
  };
  </script>
  <style lang="">
    
  </style> -->
  <!-- <4-7></4-7> -->
   <!-- <template lang="">
    <div>
      <ChildCom msg=" Hello,I am dad"/>
    </div>
   </template>
   <script>
   import ChildCom from './ChildCom.vue';
   export default {
    components:{
      ChildCom
    }
   }
   </script>
   <style lang="">
    
   </style> -->
   <!-- <4-8></4-8> -->
    <!-- <template lang="">
      <div> -->
        <!-- <ChildCom1 name="name" age= "age"/> -->
         <!-- <ChildCom1 :name="name" :age="age"/>
      </div>
    </template>
    <script>
    import ChildCom1 from './ChildCom1.vue';
    export default {
    date(){
      return{
        name:"JIM",
        age:[],
        genber:"",
        hobby:[]
      }
    },
    components:{
      ChildCom1
    }
    }
    </script>
    <style lang="">
      
    </style> -->
    <!-- <4-9></4-9> -->
<!-- <template>
  <div>
    <mycom1 :parentMsg="msg"></mycom1>
  </div>
</template>
<script>
import mycom1 from './MyCom1.vue';
export default {
  data(){
    return{
      msg:'父组件 msg'
    }
  },
  components:{
   mycom1
  }
}
</script>
<style scoped>
  
</style> -->
<!-- <4-10></4-10> -->
 <!-- <template>
  <div>
    <mycom2 :childWidth="width"></mycom2>
  </div>
 </template>
 <script>
 import mycom2 from './MyCom2.vue';
 export default {
  data(){
    return
    {
      width:400
    }
  },
  components:{
    mycom2
  }
 }
 </script>
 <style scoped>
  
 </style> -->
 <!-- <template>
  <div>
    <ChildCom :name="name" :age="age"/>
    <mycom1 :parentMsg="msg"></mycom1>
    <mycom2 :childWidth="width"></mycom2>
  </div>
 </template>
 <script>
 import ChildCom from './ChildCom.vue';
 import mycom1 from './MyCom1.vue';
 import mycom2 from './MyCom2.vue';
 export default {
  data(){
    return{
      name:"Jim",
      age:[],
      gender:"",
      hobby:[],
      width:400,
      msg:"父组件的msg"
    }
  },
  components:{
    ChildCom,
    mycom1,
    mycom2
  }
 }
 </script>
 <style scoped>
  
 </style> -->
 <!-- <4-11></4-11> -->
  <!-- <template lang="">
    <div>
      <ChildCom3 @score = "scoreHandler"></ChildCom3>
    </div>
  </template>
  <script>
  import ChildCom3 from './ChildCom3.vue';
  export default {
    components:{
      ChildCom3
    },
    methods:{
      scoreHandler(arg1,arg2){
        console.log(arg1,arg2);
      }

    }
    
  };
  </script>
  <style scoped>
    
  </style> -->
  <!-- <4-12></4-12> -->
   <!-- <template lang="">
    <div>
      <ChildCom4 ref = 'childRef'></ChildCom4>
      <button @click= "sendMessage">Send Message To Child</button>
    </div>
   </template>
   <script>
import ChildCom4 from './ChildCom4.vue';
   export default {
    components:{
      ChildCom4
    },
    methods:{
       sendMessage(){
      this.$refs.childRef.receiveMessage('Hello from parent');
    }
    }
   };
   </script>
   <style lang="">
    
   </style> -->
   <!-- <4-13></4-13> -->
    <!-- <template>
      <div>
        <ChildCom5 v-model="msg"/>{{msg}}
      </div>
    </template>
    <script>
import ChildCom5 from './ChildCom5.vue';
    export default {
      data(){
        return{
          msg:""
        }
      },
      components:{
        ChildCom5
      }
    }
    </script>
    <style lang="">
      
    </style> -->
    <!-- <4-13></4-13> -->
     <template lang="">
      <div>
        <ChildCom6></ChildCom6>
      </div>
     </template>
     <script>
     import ChildCom6 from './ChildCom6.vue';
     export default {
      components:{
        ChildCom6
      },
      provide:{
        message:'Hello from parent'
      }
     };
     </script>
     <style lang="">
      
     </style>